<script setup>
import { MeModal } from '@/components/index.js'
import { useForm, useModal } from '@/composables/index.js'

const props = defineProps({
  userId: {
    type: Number,
    required: true,
  },
})
console.log(props.userId, '获取收藏集信息')

const list = ref([
  {
    id: 1,
    title: '我的收藏',
    type: 'default',
    status: 0,
    lastUpdate: '2023-08-08',
    articleCount: 39,
    subCount: 1,
    desc: '我是描述',
  },
  {
    id: 2,
    title: 'AI',
    status: 1,
    lastUpdate: '2028-04-22',
    articleCount: 1,
    subCount: 1,
    desc: '我是描述阿德所发生的',
  },
])

const subList = ref([
  {
    user: {
      avatar: 'https://avatars.githubusercontent.com/u/10290406?v=4',
      nickname: 'Spring源码项目进行时',
    },
    title: '战场小宝',
    articleCount: 39,
    subCount: 1,
    isSub: true,
  },
  {
    user: {
      avatar: 'https://avatars.githubusercontent.com/u/10290406?v=4',
      nickname: '战场小宝',
    },
    title: 'GPT4精选合集',
    articleCount: 12,
    subCount: 0,
    isSub: true,
  },
])

const activeTag = ref(0)

// 切换
function toggleSubS(target) {
  target.isSub = !target.isSub
}

const [modalRef, okLoading] = useModal()
const [createFormRef, createForm, validation, commonRules] = useForm({
  status: 1,
})

const titleModal = ref('新建收藏集')

function openModal(row, title) {
  titleModal.value = title
  createForm.value = { ...row }
  modalRef.value?.open()
}

function cancelModal() {
  createFormRef.value?.resetFields()
  createForm.value = {}
}

async function handleOk() {
  await validation()
  okLoading.value = true

  if (createForm.value.id) {
    console.log('编辑收藏集', createForm.value)
  }
  else {
    console.log('创建收藏集', createForm.value)
  }
}

async function deleteCollect(id) {
  await $messageBox
    .alert('删除收藏集同时也会移除收藏集中内容', '确定删除该收藏集吗？', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      showCancelButton: true,
      center: true,
      showClose: false,
    })
    .then(() => {
      $message({
        type: 'success',
        message: `Delete completed id:${id}`,
      })
    })
    .catch(() => {})
}
</script>

<template>
  <div class="min-h-500 px-8">
    <div class="mb-20 flex justify-between">
      <div class="us">
        <el-tag
          size="large"
          round
          class="mr-10 cursor-pointer"
          :type="activeTag === 0 ? 'primary' : 'info'"
          @click="activeTag = 0"
        >
          <span class="mr-5">我创建的</span>
          <span>{{ list.length }}</span>
        </el-tag>
        <el-tag
          size="large"
          round
          class="mr-10 cursor-pointer"
          :type="activeTag === 1 ? 'primary' : 'info'"
          @click="activeTag = 1"
        >
          <span class="mr-5">我订阅的</span>
          <span>{{ subList.length }}</span>
        </el-tag>
      </div>
      <div
        class="f-c-c cursor-pointer font-size-14 color-primary us"
        @click="openModal({ status: 1 }, '新建收藏集')"
      >
        <i class="i-fa6-solid:plus mr-5" />
        <span class="line-height-100%">新建收藏集</span>
      </div>
    </div>
    <div v-if="activeTag === 0">
      <template v-for="(item, index) in list" :key="index">
        <div class="pbox min-h-50 flex">
          <div class="min-h-50 flex-col flex-1 justify-between gap-10">
            <div class="flex items-center">
              <span class="mr-5">{{ item.title }}</span>
              <i v-if="item.status === 0" class="i-fe:lock mr-5 op-text" />
              <el-tag v-if="item.type === 'default'" size="small">
                默认
              </el-tag>
            </div>
            <div class="font-size-14 op-text">
              <span>{{ item.lastUpdate }} 更新&nbsp;·&nbsp;</span>
              <span>{{ item.articleCount }}篇文章&nbsp;·&nbsp;</span>
              <span>{{ item.subCount }}订阅</span>
            </div>
          </div>
          <div class="isShow flex items-end font-size-14 op-text us">
            <div
              class="mr-20 f-c-c cursor-pointer-text-hover"
              @click="openModal(item, '编辑收藏集')"
            >
              <i class="i-fe:edit mr-5" /><span class="line-height-100%">编辑</span>
            </div>
            <div
              v-if="item.type !== 'default'"
              class="f-c-c cursor-pointer-text-hover"
              @click="deleteCollect(item.id)"
            >
              <i class="i-fe:trash-2 mr-5" /><span class="line-height-100%">删除</span>
            </div>
          </div>
        </div>
        <!-- 只在非最后一项时渲染分隔线 -->
        <el-divider v-if="index < list.length - 1" />
      </template>
      <el-empty
        v-if="list.length === 0"
        description="这里什么也没有"
        class="us"
      />
    </div>

    <div v-if="activeTag === 1">
      <template v-for="(item, index) in subList" :key="index">
        <div class="min-h-50 flex">
          <div class="flex-col flex-1 justify-between gap-10">
            <div class="flex items-center">
              <span class="mr-5">{{ item.title }}</span>
            </div>
            <div class="flex items-center font-size-14 op-text">
              <el-avatar class="mr-10" :src="item.user.avatar" size="small" />
              <span>{{ item.user.nickname }}&nbsp;·&nbsp;</span>
              <span>{{ item.articleCount }}篇文章&nbsp;·&nbsp;</span>
              <span>{{ item.subCount }}订阅</span>
            </div>
          </div>
          <div class="f-c-c">
            <el-button
              :type="item.isSub ? '' : 'primary'"
              class="w-85"
              @click="toggleSubS(item)"
            >
              {{ item.isSub ? "已订阅" : "订阅" }}
            </el-button>
          </div>
        </div>
        <!-- 只在非最后一项时渲染分隔线 -->
        <el-divider v-if="index < subList.length - 1" />
      </template>
      <el-empty
        v-if="subList.length === 0"
        description="这里什么也没有"
        class="us"
      />
    </div>
  </div>
  <MeModal
    ref="modalRef"
    width="500px"
    :on-ok="handleOk"
    :on-cancel="cancelModal"
  >
    <template #header>
      <span class="font-size-20 fw-black">{{ titleModal }} </span>
    </template>
    <el-form
      ref="createFormRef"
      :model="createForm"
      label-width="auto"
      style="max-width: 500px"
      class="p-8"
    >
      <el-form-item prop="title" :rules="commonRules.required">
        <template #label>
          <span class="font-size-14">名称：</span>
        </template>
        <el-input
          v-model="createForm.title"
          size="large"
          placeholder="请输入收藏集名称"
        />
      </el-form-item>
      <el-form-item prop="desc">
        <template #label>
          <span class="font-size-14">描述：</span>
        </template>
        <el-input
          v-model="createForm.desc"
          :rows="8"
          size="large"
          placeholder="请输入收藏集描述（限100字，选填）"
          type="textarea"
          show-word-limit
          :maxlength="100"
        />
      </el-form-item>
      <el-form-item prop="status" :rules="commonRules.required">
        <el-radio-group v-model="createForm.status">
          <div class="flex-col">
            <el-radio name="asdf" :value="1">
              公开
              <span class="font-size-12 op-text">当其他人关注此收藏集后不可再更改为隐私</span>
            </el-radio>
            <el-radio :value="0">
              隐私 <span class="font-size-12 op-text">仅自己可见此收藏集</span>
            </el-radio>
          </div>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </MeModal>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
}
.isShow {
  display: none;
}
.pbox:hover .isShow {
  display: flex;
}
</style>
